Hasta no hace mucho yo pensaba que para añadir el efecto Mouseover era necesario hacerlo con javascript, pero he descubierto que también puede hacerse con CSS.
En xyberneticos he visto un menú de vikiworks que me ha gustado mucho, es un sencillo texto con una segunda línea donde podemos añadir una breve descripción.

Lo podemos aplicar a nuestro blog añadiendo unas líneas en los CSS que podrán ser modificadas respecto a color. Nos situamos en nuestra plantilla edición de HTML, justo antes de ]]></b:skin> añadimos lo siguiente:

#menu {margin:0;padding:0; }
#menu ul { margin:0;padding:0; }
#menu ul li { display:block;padding:0; float:left;text-align:left;margin-right:2em; }
#menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; }
#menu li a:hover { color:#ffc300; }
#menu li span { font:11px arial; color:#666; margin:0; }
#menu li span:hover {color:#999;}

Luego añadimos un elemento de página y en HTML/Javascript agregamos:

<div id="menu"><ul>
<li><a href="#">Menu01<br /><span>Short desc</span></a></li>
<li><a href="#">Menu02<br /><span>Short desc</span></a></li>
<li><a href="#">Menu03<br /><span>Short desc</span></a></li>
</ul></div>





Donde Menu01-Menu02-Menu03 es el texto que visionamos y hace las veces de enlace.
El arterisco ( # ) lo sustituimos por la url de la página que vamos a enlazar.
"Short desc" es el subtitulo, texto o breve descripción que podemos añadir, de no desearlo lo suprimimos.

Pedro
Este comentario ha sido eliminado por el autor.
Responder
Gem@

Muchas gracias Juan Carlos, el botón me encanta y pasará a mi lista de botones para enlazarme ;)

Responder
Pedro
Este comentario ha sido eliminado por el autor.
Responder
Syl

Hola Gem@! te queria pedir ayuda... hace casi un año le puse una imagen de cabecera a mi blog siguendo tus instrucciones, no me acuerdo si fue aquello de quitarle el titulo... y ahora queria que esa misma cabecera actuara tambien como enlace para recargar la pagina, pero he mirado todas tus entradas relacionadas y en ninguna veo exactamente el codigo como yo lo tengo... podrias mirar mi plantilla y decirme como lo hago? muchas gracias por adelantado!

Responder
Gem@

Gracias Juan Carlos así está mejor ;)

Syl busca:
#header
background: transparent url(URLDELAIMAGEN) bottom left no-repeat;

Donde URLDELAIMAGEN tienes la url de la imagen del logo añadida, sustituyela por la nueva, recuerda que esta mide 866x174

Responder
Anónimo

Hola gem@ querida, te he dejado un nuevo premio en mi blog, estoy segura que te gustará mucho, claro que como siempre eres libre de seguirlo o no, de tomarlo o no, pero no creo que este lo dejes pasar.
Te copié el post de La hora del Planeta, pero miarroba estaba caído y lo tube que poner en mi blog de Blogger, así que creo que pasó sin pena ni gloria, ya que no pasa mucha gente por allí.
Pero yo apagué todas las luces de mi casa, desenchufé todos los aparatos, incluida la pc que fue lo que mas lamenté, claro.
En mi cuadra vi mas luces prendidas que nunca, no se si sería idea mía, pero aquí no le han dado mucha importancia, a pesar que al menos la capital, Buenos Aires por primera vez se une a esta campaña, se le debería dar mas difusión me parece.
Un beso gem@ diosa!!

Responder
Syl

Hola de nuevo! creo que no me expliqué bien o no entiendo bien tu respuesta :(
No quiero cambiar la imagen, solo quiero que la que ya hay, actue como enlace a la pagina principal del blog...

Responder
la-filistea

Hola Gem@:
tengo una pregunta: puse en mi blog el código de la caja parecido al que tu tienes donde dice "ellos si que saben".

Pero los enlaces me aparecen pegados sin espacio intermedio.Cómo hago para que aparezcan con un espacio entre cada uno.

Ya les puse < br > Pero no me funciono.

Gracias.

Responder
Gem@

La Filistea en lugar de <br> prueba con <p> al principio y </p> al final de cada enlace (incluyendo la imagen)
Un abrazo ;)

Responder
Gem@

Hola k_nelita me alegra verte por aquí amiga mía, mil gracias por el detalle, por ese premio a la amistad que como sabes me da vergüenza recoger pero lo hago con todo el cariño del mundo ;)

Responder
la-filistea

Me funciono perfectamente Gem@.
Nuevamente gracias!!!...

Tu siempre tan amable

Responder
Gem@

Syl he sido yo que me adelanté sin darme cuenta tu pregunta :(
Hay una forma que es la que yo tengo aplicada en mi blog que al mismo tiempo que hace que el logo actualice la página también da la opción de adecuarlo de tamaño si es que deseamos hacerlo.
Puedes verlo aquí .
Recuerda que antes debes suprimir la url del logo que tines añadida donde te decía en el comentario anterior.

Responder
Gem@

Me alegra lo consiguieras La Filistea ;)

Responder
Syl

Ahora si! aunque he tenido que trampear en lo del #header porque me salia el espacio vacio de 174px entre la cabecera-enlace y las entradas, vamos que quedaba un hueco en medio. Al final le he puesto 83px y se ha quedado a la altura normal... q cosas!
Gracias!!!!

Responder
Marta Nieves Montero González

Mi estimada cómplice:

Te he obsequiado con un Premio.

Por favor, pasa por mi blog para recogerlo.

Un besito,

Vesta, desde mi corazón

Responder
hsm1967

Hola!!!! que bueno esta este blog !!!!, te descubri por medio del blog de Ronni del cual soy cliente de sus templates,de tus post he conocido cosas interesantes que me han ayudado ,de paso si no te molesta te pongo entre mis recomendados,saludos ? como viene la primavera ?

Responder
Gem@

Estupendo Syl ;)

Mil gracias Vesta paso a recoger mi regalo ;)
(He visto tu mail donde me avisas hace un momento)


Bienvenido Hugo veo que compartimos gustos, estupendo el servicio que Ronnie nos brinda con sus plantillas.
Es un lujo encontrarme entre los recomendados.
Mil gracias ;)

Responder
Anónimo

Hola Gem@, gracias por todo lo que nos ayudas. He incorporado este menú al final de mi blog y me pasa algo de lo más extraño: al principio de donde van los títulos del menú ("Menú01" etc.) me salen unos puntitos en la pantalla... como si fueran pixeles fuera de lugar. Quizá sea cosa de mi pantalla y sólo lo veo yo, pero no se, a lo mejor es una incompatibilidad o alguna cosa rara (no entiendo mucho de interneses). Gracias y un beso,
S.

Responder
Anónimo

OOOopsss!!! Mi blog es:
Cuanticas paradojas!

Responder
Gem@

Mira si añadiste algún asterisco ( * ) si copias donde dice BigBang y lo pegas aparece esto * BigBang.

Responder
Anónimo

Hola, Gema, te informo que ahora estoy en el primer pupitre. Aquí me tienes leyendo el sinfín de plantillas y opciones. Con cariño... Fausto.

Responder
Gem@

!Hola Fausto¡ apenas me puse con el tema de tu blog, pero hoy nadie le quita un par de horas.
¿Sabes lo bueno de sentarse en el primer pupitre? que llegas antes al recreo ;)

Responder
Anónimo

Gracias por tu respuesta Gema. La verdad es que no hay asterisco por ningún lado... bueno no importa, debe ser cosa de mi pantalla, y además queda muy chulo así.
¡saludos! :D

Responder
Gem@

No es de tu pantalla, yo también lo veo en la mía S, haz la prueba tu misma si copias un texto de las categorías del menú y lo copias en otro lugar aparece.
Si te gusta no hay problema pero si no, prueba a añadir el código de los enlaces en otro elemento de página como si pusieras un menú encima del otro ¿saldrá otra vez? :(

Responder
Anónimo

Lo he ocupado me resulto, estoy recien aprendiendo. Ahora no se como vincular los links creados a informacion a ocupar (ejemplo "Perfil" como vinculo perfil a su informacion), he tratado todo el dia y no puedo no quiero salirme de mi blog quiero moverme solo dentro de el.

atte.
Luis luishorellanam@gmail.com

Responder
Gem@

Hola Luis, la forma de vincularlo es muy sencilla y te explico...
Debes situarte en la página que deseas vincular, por ejemplo el perfil.
Copiamos la url que aparece en la barra de direcciones cuando visualizamos el perfil y la pegamos sustituyendo el asterisco ( # )
Luego el texto de Menu01 o el que proceda lo sustituyes por el texto que deseas añadir, ejemplo perfil :)

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top